<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.web{
				width: 375px;
				height: 667px;
				background: url(img/gameBg1.jpg);
				overflow: hidden;
				margin: 0 auto;
				position: relative;
			}
			.jia{
				width: 375px;
				height: 667px;
				position: relative;
				overflow: hidden;
				z-index: 1;
			}
			.img1{
				width: 100%;
				height: 100%;
			}
			.img2{
				position: absolute;
				bottom: 130px;
				left: 170px;
				cursor: pointer;
			}
			.test{
				float: left;
				position: relative;
			}
			.song{
				width: 95px;
				height: 64px;
				overflow: hidden;
				position: absolute;
				top: 390px;
				left: 146px;
			}
			.song img{
				animation: song1 steps(1,start) 2.8s infinite;
			}
			.long{
				width: 95px;
			}
			.long1{
				position: absolute;
				top: 360px;
				left: 30px;
			}
			.long2{
				position: absolute;
				top: 360px;
				left: 140px;
			}
			.long3{
				position: absolute;
				top: 360px;
				left: 250px;
			}
			.guanka{
				width: 130px;
				position: absolute;
				top: 30px;
				left: 20px;
			}
			.life{
				position: absolute;
				top: 30px;
				left: 180px;
			}
			.loader1{
				width: 375px;
				height: 667px;
				background: url(img/overBg.jpg);
				position:absolute;
				z-index: 3;
			}
			.loader{
				position: fixed;
				top: 45%;
				left: 49%;
				color: #fff;
			}
			.loader1 p{
				position: fixed;
				top: 48%;
				left: 44%;
				color: #fff;
			}
			.chenggong{
				position: fixed;
				left: 150px;
				top: 500px;
				opacity: 0;
			}
			.shiB{
				position: fixed;
				left: 150px;
				top: 500px;
				opacity: 0;
			}
			.fenshu{
				width: 375px;
				height: 667px;
				position: absolute;
				top: 0;
				background: url(img/overBg.jpg);
				z-index: 4;
				display: none;
			}
			.fenshu1{
				width: 150px;
				height: 150px;
				background: gray;
				margin: 200px auto;
				border-radius: 20px;
			}
			.fenshu1 p{
				font-size: 60px;
				text-align: center;
				padding-top: 25px;
				color: #fff;
			}
			
			@keyframes song1{
				0%{
					transform: translate(0,0);
				}
				20%{
					transform: translate(0,-61.3px);
				}
				40%{
					transform: translate(0,-122.6px);
				}
				60%{
					transform: translate(0,-183.9px);
				}
				100%{
					transform: translate(0,0);
				}
			}
		</style>
	</head>
	<body>
		<div class="web">
			<div class="fenshu">
				<div class="fenshu1">
					<p>完</p>
				</div>
			</div>
			<!--预加载-->
			<div class="loader1">
				<div class="loader"></div>
				<p>正在加载......</p>

			</div>
			<!--开始-->
			<div class="jia">
				<img class="img1" src="img/gameBg.jpg"/>
				<img class="img2" src="img/btnStart.png"/>
			</div>
			<!--关卡-->
			<div class="guanka">
				<img src="img/guanqiatext.png"/>
				<img src="img/nb0.png"/>
				<img src="img/nb0.png"/>
				<img src="img/nb1.png"/>
			</div>
			<!--生命-->
			<div class="life">
				<img src="img/livetext.png"/>
				<img class="xin" src="img/love1.png"/>
				<img class="xin" src="img/love1.png"/>
				<img class="xin" src="img/love1.png"/>
			</div>
			<!--笼子-->
			<div class="test test1">
				<img class="long long1" src="img/beizi.png"/>
			</div>
			<div class="test test2">
				<!--松鼠-->
				<div class="song">
					<img src="img/jinglingSheet.png"/>
				</div>
				<img class="long long2" src="img/beizi.png"/>
			</div>
			<div class="test test3">
				<img class="long long3" src="img/beizi.png"/>
			</div>
			<!--成功后出现-->
			<div class="chenggong">
				<img src="img/bucuootext.png"/>
			</div>
			<!--失败后出现-->
			<!--<div class="shiB">
				<img src="img/kanhualematext.png"/>
			</div>-->
			<!--游戏结束-->
			<!--<div>
				<img src="img/gameOvertext.png"/>
			</div>-->
		</div>
		
		
		<script src="js/jquery-2.1.0.js"></script>
		<script src="js/preloadjs.min.js"></script>
		<script src="js/my_ajax.js"></script>
		<script src="js/index.js"></script>
		<script src="js/jquery.transit.js"></script>
		
	</body>
</html>
